<template>
    <div class="orders">
       <div class="search">
          <div>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入商品名称"  v-model="goodsName"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入最低价格" v-model="lowPrice"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入最高价格" v-model="highPrice"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
       </div>
       <div class="tab">
          <template>
                <el-table
                    :data="goodsList"
                   :cell-style="{ fontSize: '16px', color: '#000' }"
                   :header-cell-style="{ color: '#000', fontSize: '16px', }"
                    max-height="650"
                    style="width: 100%">
                    <el-table-column
                        label="商品图片"
                        width="150">
                        <template slot-scope="scope">
                           <div class="img">
                                <img :src="scope.row.goodsphoto" alt="">
                           </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="fullname"
                        label="商品名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                    prop="unitcost"
                        label="商品原价">
                    </el-table-column>
                    <el-table-column
                        prop="brand"
                        label="品牌">
                    </el-table-column>
                    <el-table-column
                        prop="flavor"
                        label="香型">
                    </el-table-column>
                     <el-table-column
                        prop="degree"
                        label="度数">
                    </el-table-column>
                     <el-table-column >
                        <template slot="header">
                             <el-select v-model="value" placeholder="请选择" @change="isDown">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                        <template slot-scope="scope">
                            <div :class="scope.row.amount ? 'skyblue' : 'red'">
                                {{ scope.row.amount ? "未下架" : "已下架" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="amount"
                        label="库存量">
                    </el-table-column>
                     <el-table-column
                        label="会员价">
                         <template slot-scope="scope">
                            <div>
                                {{ scope.row.vipcost }}
                            </div>
                        </template>
                    </el-table-column>
                     <el-table-column
                        width="200">
                        <template slot="header">
                             <el-select v-model="typeValue" placeholder="请选择" @change="selecType">
                                <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                     <template slot-scope="scope">
                            <div :class="scope.row.type=='普通商品' ? 'skyblue' : 'red'">
                                {{ scope.row.type }}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
       </div>
       <div class="bottom" >
            <div class="bottom-box">
                <el-button @click="changePage('prev')">上一页</el-button>
                <el-pagination
                    background
                    layout=" pager"
                    :page-size="5"
                    :current-page="page"
                    @current-change="fn"
                    :total="this.total">
                </el-pagination>
                <el-button @click="changePage('next')">下一页</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { get } from "@/api/api"
import {getGoods} from "@/api/goods"
export default {
    created(){
        this.getGoods(1,5)

    },
    data() {
        return {
            goodsName: "",
            lowPrice: "",
            highPrice: "",
            goodsList: [],
            page:1,
            total:0,
            options: [{
                value: '是否下架',
                label: '是否下架'
            }, {
                value: '1',
                label: '已下架'
            }, {
                value: '0',
                label: '未下架'
            }],
            value: "是否下架",
            typeList: [{
                value: '商品类别',
                label: '商品类别'
            }, {
                value: '普通商品',
                label: '普通商品'
            }, {
                value: '积分商品',
                label: '积分商品'
            }],
            typeValue: "商品类别"
        }
    },
    methods:{
        async getGoods(page,pageSize){
           const data=await getGoods(`goods/list/${page}/${pageSize}`)
           this.goodsList=data.data.list.records
           this.total=data.data.list.total
           this.page=data.data.list.current
        },

      async isDown(isDown){
            if(isDown=="是否下架"){
                this.getGoods(1,5)
            }else{
                const formData=new FormData()
                formData.append("isdown",isDown)
                const params = new URLSearchParams(formData)
                const da= await get(`goods/list/${this.page}/5?${params.toString()}`)
                this.goodsList=da.data.list.records
            }
       }, 
        changePage(type){
            if(type=="prev"){
               if(this.page===1){
               this.page=1
               this.$message.warning("已经是第一页了")
               }else{
                this.page--
                this.getGoods(this.page,5)
               }
            }else if(type=="next"){
               if(this.page>=this.total/5){
                    this.page=this.total/5
                    this.$message.warning("已经是最后一页了")
               }else{
                this.page++
                this.getGoods(this.page,5)
               }
            }
            
        },
       async selecType(type){
            console.log(type);
            if(type==="商品类别"){
                this.getGoods(1,5)
            }else{
                const formData=new FormData()
                formData.append("type",type)
                const params = new URLSearchParams(formData)
                const da= await get(`goods/list/${this.page}/5?${params.toString()}`)
                this.goodsList=da.data.list.records
            }
        },
        fn(page){
            this.page=page
            this.getGoods(this.page,5)
        },
       async search(){
            const formData=new FormData()
            formData.append("fullname",this.goodsName)
            formData.append("max",this.highPrice)
            formData.append("min",this.lowPrice)
            const params = new URLSearchParams(formData)
            const da= await get(`goods/list/${this.page}/5?${params.toString()}`)
            this.goodsList=da.data.list.records
        }
    }
}
</script>
<style scoped>
.orders {
    padding: 50px 50px 0 50px;
    width: 100%;
    height: 88vh;
    display: flex;
    flex-direction: column;
}

.bottom {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination {
    width: 50px;
}

.tab {
    width: 100%;
    flex: 1;
    margin-top: 20px;
}

.bottom-box {
    display: flex;
    height: 40px;
    align-items: center;
}

.red {
    color: red;
    font-size: 17px;
}

.skyblue {
    color: #4eb1ff;
    font-size: 17px;
}

.img>img {
    width: 80px;
    height: 80px;
}
</style>